<template>
	<view class="wanlgroups-user-container">
		<view class="wanlgroups-user-container__head" :style="{ height: headHeight + 'px' }">
			<view
				class="background"
				v-if="headerOpacity > 0"
				:style="{
					height: headHeight + 'px',
					opacity: headerOpacity,
					backgroundColor: userData.color
				}"
			>
				<view class="bgcolor"></view>
			</view>
			<view
				class="navigater text-white"
				:style="{
					height: headHeight + 'px',
					paddingTop: headTop + 'px'
				}"
			>
				<view class="text-xl">
					<view class="margin-right">
						<text class="wlIcon-fanhui1 text-bold" @tap="handleBack"></text>
					</view>
					<view class="text-cut" style="width: 100rpx;">
						<text
							class="text-lg"
							v-if="headerOpacity > 0"
							:style="{ opacity: headerOpacity }"
						>
							{{ userData.user.nickname }}
						</text>
					</view>
				</view>
				<view class="text-xl">
					<text
						v-if="headerOpacity > 0 && !isMyfind && userData.isFollow === 0"
						:style="{ opacity: headerOpacity }"
						class="margin-right text-sm"
						@tap="handleFollow(userData.shop)"
					>
						+ 关注
					</text>
					<text
						class="wlIcon-fenxiangcopy margin-right-xl text-bold"
						@tap="showModal('share')"
					/>
					<text class="wlIcon-gengduo text-bold" @tap="showModal('menu')" />
				</view>
			</view>
		</view>
		<!-- 主体 -->
		<view
			class="wanlgroups-user-container__main"
			:style="{
				backgroundColor: userData.color,
				backgroundImage: `url(${$wanlshop.oss(
					userData.image,
					0,
					50,
					1,
					'transparent',
					'png'
				)})`
			}"
		>
			<view
				class="head text-white"
				:style="{ paddingTop: headHeight + 'px' }"
				@click="handleTheme"
			>
				<view class="userinfo">
					<view
						class="cu-avatar margin-right-bj round"
						:style="{
							backgroundImage: `url(${$wanlshop.oss(userData.user.avatar, 88, 88)})`
						}"
					/>
					<view>
						<view class="text-xl margin-bottom-xs">{{ userData.user.nickname }}</view>
						<view class="text-xs text-white-agba">
							<text>账户号：</text>
							<text>{{ userData.user_no }}</text>
							<text
								class="wlIcon-fuzhi margin-left-sm"
								@click.stop="$wanlshop.copy(userData.user_no)"
							></text>
						</view>
					</view>
				</view>
				<view class="margin-top-xl text-sm">
					<text>{{ userData.user.bio || '他/她未留下任何个性签名' }}</text>
					<text
						v-if="isMyfind"
						class="wlIcon-jifen margin-left-xs"
						@click.stop="handleUserEdit"
					></text>
				</view>
				<view class="findinfo margin-top">
					<view class="quantity">
						<view
							class="project"
							@click.stop="
								$wanlshop.to(`/pages/apps/find/user/follow?id=${userData.user_no}`)
							"
						>
							<view class="text-lg">
								{{
									$wanlshop.toFormat(
										userData.follow < 0 ? 0 : userData.follow,
										'thousand'
									)
								}}
							</view>
							<view class="text-xs text-white-agba">关注</view>
						</view>
						<view
							class="project"
							@click.stop="
								$wanlshop.to(`/pages/apps/find/user/fans?id=${userData.user_no}`)
							"
						>
							<view class="text-lg">
								{{
									$wanlshop.toFormat(
										userData.fans < 0 ? 0 : userData.fans,
										'thousand'
									)
								}}
							</view>
							<view class="text-xs text-white-agba">粉丝</view>
						</view>
						<view class="project" @click.stop="showModal('praised')">
							<view class="text-lg">
								{{
									$wanlshop.toFormat(
										userData.praised < 0 ? 0 : userData.praised,
										'thousand'
									)
								}}
							</view>
							<view class="text-xs text-white-agba">获赞</view>
						</view>
					</view>
					<view>
						<button
							v-if="isMyfind"
							class="cu-btn round line-white"
							@click.stop="handleUserEdit"
						>
							编辑资料
						</button>
						<block v-else>
							<block v-if="loadingFollow">
								<button
									v-if="userData.isFollow === 0"
									class="cu-btn round line-white"
								>
									<text
										class="wlIcon-jiazai1 wlIconfont-spin margin-right-xs"
									></text>
									关注中..
								</button>
								<button v-else class="cu-btn round line-white">
									<text
										class="wlIcon-jiazai1 wlIconfont-spin margin-right-xs"
									></text>
									取消中..
								</button>
							</block>
							<block v-else>
								<button
									v-if="userData.isFollow === 0"
									class="cu-btn round line-white"
									@click.stop="handleFollow(userData.shop)"
								>
									<text class="wlIcon-tianjia margin-right-xs"></text>
									关注
								</button>
								<button
									v-else
									class="cu-btn round line-white"
									@click.stop="handleFollow(userData.shop)"
								>
									已关注
								</button>
							</block>
						</block>
					</view>
				</view>
				<view
					v-if="userData.shop"
					class="shopinfo margin-top-bj solid-top padding-top-bj"
					@click.stop="onShop(userData.shop.id)"
				>
					<view
						class="cu-avatar margin-right-bj round"
						:style="{
							backgroundImage: `url(${$wanlshop.oss(userData.shop.avatar, 88, 88)})`
						}"
					/>
					<view class="subject">
						<view class="info">
							<view v-if="userData.shop.isself == 1">
								<view class="cu-tag sm line-white radius margin-right-xs">
									自营店
								</view>
								<text class="text-cut" style="width: 50%;">
									{{ userData.shop.shopname }}
								</text>
							</view>
							<view v-else>
								<view
									class="cu-tag sm line-white radius margin-right-xs"
									v-if="userData.shop.state == 0"
								>
									个人店
								</view>
								<view
									class="cu-tag sm line-white radius margin-right-xs"
									v-if="userData.shop.state == 1"
								>
									企业店
								</view>
								<view
									class="cu-tag sm line-white radius margin-right-xs"
									v-if="userData.shop.state == 2"
								>
									旗舰店
								</view>
								<text class="text-cut" style="width: 50%;">
									{{ userData.shop.shopname }}
								</text>
							</view>
						</view>
						<view class="menu">
							<button class="cu-btn wlIcon margin-right-sm line-white round">
								<text class="wlIcon-31dianpu"></text>
							</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="wanlgroups-user-container__list bg-white">
			<view class="questionbag" :style="{ top: `${headHeight}px` }">
				<scroll-view scroll-x class="bg-white nav text-center">
					<view
						class="cu-item"
						:class="index === currentId ? 'text-30 text-bold' : 'wanl-gray'"
						v-for="(item, index) in navList"
						:key="index"
						@tap="handleSelect(index)"
					>
						{{ item.type_text }}
					</view>
				</scroll-view>
			</view>
			<view class="main">
				<view v-show="keys === currentId" v-for="(data, keys) in navList" :key="keys">
					<block v-if="isMyfind">
						<view v-if="data.dataList.length === 0 && data.loaded" class="empty">
							<view class="text-center wanl-gray">
								<image
									:src="$wanlshop.appstc('/default/collect_default3x.png')"
								></image>
								<view class="text-30 margin-bottom-bj">
									{{
										keys === 0
											? '你还没有发布任何作品'
											: '你还没有任何喜欢的收藏'
									}}
								</view>
								<button
									v-if="keys === 0"
									class="cu-btn line-black"
									@tap="handlePublish()"
								>
									立即发布
								</button>
								<button
									v-else
									class="cu-btn line-black"
									@click="$wanlshop.to('/pages/apps/find/list')"
								>
									去看看
								</button>
							</view>
						</view>
					</block>
					<block v-else>
						<wanl-empty
							v-if="data.dataList.length === 0 && data.loaded"
							:text="keys === 0 ? '他/她还没有发布过任何作品' : '他/她还没有任何收藏'"
							src="collect_default3x"
						/>
					</block>
					<view class="list" v-if="data.dataList.length > 0">
						<view class="item" v-for="(item, index) in data.dataList" :key="index">
							<view
								v-if="item.state === 'normal'"
								class="examine radius-bock"
								:style="{
									backgroundImage:
										'url(' + $wanlshop.oss(item.images[0], 200, 0) + ')'
								}"
								@tap="onFind(item)"
							>
								<view
									class="cover radius-bock"
									:style="{
										backgroundImage:
											'url(' + $wanlshop.oss(item.images[0], 200, 0) + ')'
									}"
								/>
								<view v-if="item.type === 'video'" class="state padding-sm text-white text-xxxl">
									<text class="wlIcon-video" />
								</view>
							</view>
							<view
								v-else
								class="examine radius-bock"
								@tap="$wanlshop.msg(`内容${stateText[item.state].text}, 无法查看`)"
							>
								<view
									class="cover"
									:style="{
										backgroundImage:
											'url(' + $wanlshop.oss(item.images[0], 200, 0) + ')'
									}"
								/>
								<view class="state flex justify-center align-center">
									<view
										v-if="item.state"
										class="text-xxl text-center"
										:style="{ color: stateText[item.state].color }"
									>
										<text :class="stateText[item.state].icon" />
										<view class="text-df">
											{{ stateText[item.state].text }}
										</view>
									</view>
								</view>
							</view>
							<view class="padding-xs  text-bold5">
								<view class="text-cut-2">
									<view
										class="cu-tag sm radius margin-right-xs"
										:class="[typeList[item.type]]"
									>
										{{ item.type_text }}
									</view>
									{{ formatHtml(item.content) }}
								</view>
							</view>
							<view class="flex wanl-gray text-min padding-lr-xs justify-between">
								<view>
									<text>
										{{ $wanlshop.timeFormat(item.createtime, 'mm-dd') }} 发布
									</text>
									<text
										v-if="isMyfind && keys === 0"
										class="text-red margin-left-xs"
										@tap="handleDel(index)"
									>
										删除
									</text>
								</view>
								<view
									:class="{ 'text-red': item.isLike === 1 }"
									@tap="handleLike(index)"
								>
									<text
										:class="[
											item.isLike === 1 ? 'wlIcon-yiguanzhu1' : 'wlIcon-likes'
										]"
									></text>
									<text class="margin-left-xs">{{ item.likes }}</text>
								</view>
							</view>
						</view>
					</view>
					<uni-load-more :status="data.loadingType" :content-text="contentText" />
				</view>
			</view>
		</view>
		<!-- 模态框 -->
		<view class="WANL-MODAL wanlgroups-user-container__modal">
			<view
				class="cu-modal top-modal"
				:class="modalName == 'menu' ? 'show' : ''"
				@tap="hideModal"
			>
				<view class="wanl-modal-menu cu-dialog" @tap.stop="">
					<wanl-direct @change="hideModal" />
				</view>
			</view>
			<!-- 分享 -->
			<view
				class="cu-modal bottom-modal"
				:class="modalName == 'share' ? 'show' : ''"
				@tap="hideModal"
			>
				<view class="cu-dialog" @tap.stop="">
					<wanl-share
						:scrollAnimation="scrollAnimation"
						shareTitle="我发现了一个很好的线上购物商城，这是商城类目"
						shareText="品质好而且很省钱如果自己在上面购买，每年可以省下1%~40%的钱"
						:image="$wanlshop.appstc('/common/logo.png')"
						:href="
							common.appConfig.domain +
								'/pages/apps/find/user?QRtype=user'
						"
						@change="hideModal"
					/>
				</view>
			</view>
			<view
				class="cu-modal praised"
				:class="modalName == 'praised' ? 'show' : ''"
				@tap="hideModal"
			>
				<view class="cu-dialog" @tap.stop="">
					<image
						:src="$wanlshop.appstc('/common/find_fans3x.png')"
						mode="widthFix"
					></image>
					<view class="margin-tb-lg">
						<text class="wanl-gray-dark">
							{{
								`“${userData.user.nickname}”共收获得 ${$wanlshop.toFormat(
									userData.praised < 0 ? 0 : userData.praised,
									'thousand'
								)} 个赞`
							}}
						</text>
					</view>
					<view class="padding-tb-bj solid-top" @tap="hideModal">
						<text class="text-bold">确认</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			headHeight: 0,
			headerOpacity: 0,
			windowHeight: 0,
			headTop: 0,
			isMyfind: false,
			loadingFollow: false,
			modalName: null,
			scrollAnimation: 300,
			userData: {
				user_no: '',
				user: {
					avatar: '',
					nickname: '加载中..'
				},
				follow: 0,
				fans: 0,
				likes: 0,
				praised: 0,
				color: '#e9dacd',
				image: '',
				isFollow: 0
			},
			stateText: {
				publish: { icon: 'wlIcon-jiazai wlIconfont-spin', text: '发布中', color: '#fff' },
				examine: {
					icon: 'wlIcon-shouhoufuwu-zidongpingjia',
					text: '待审核',
					color: '#e6442b'
				},
				hazard: { icon: 'wlIcon-zhuyidapx', text: '内容违规', color: '#e6442b' },
				transcoding: {
					icon: 'wlIcon-jiazai1 wlIconfont-spin',
					text: '转码中',
					color: '#fff'
				},
				screenshot: {
					icon: 'wlIcon-tupian wlIconfont-spin',
					text: '生成封面中',
					color: '#fff'
				}
			},
			currentId: 0,
			typeList: {
				new: 'bg-gradual-yellow',
				live: 'wanl-bg-orange',
				want: 'bg-gradual-green',
				activity: 'bg-gradual-orange',
				show: 'wanl-bg-pink',
				video: 'wanl-bg-pink'
			},
			navList: [
				{
					type: 'works',
					type_text: '作品',
					dataList: [],
					loadingType: 'more',
					current_page: 1
				},
				{
					type: 'likes',
					type_text: '喜欢',
					dataList: [],
					loadingType: 'more',
					current_page: 1
				}
			],
			contentText: {
				contentdown: ' ',
				contentrefresh: '正在疯狂加载中...',
				contentnomore: '我是有底线的'
			}
		};
	},
	computed: {
		...mapState(['common'])
	},
	onLoad(option) {
		// 计算页面尺寸
		let sys = this.$wanlshop.wanlsys();
		this.headTop = sys.top;
		this.headHeight = sys.height;
		this.windowHeight = sys.windowHeight;
		// 加载 Api
		if (option.id) {
			this.loadData(option);
		} else {
			this.loadData({ id: null });
		}
	},
	// 下拉刷新
	onReachBottom() {
		this.loadFindData();
	},
	onPageScroll(e) {
		let tmpY = 170;
		e.scrollTop = e.scrollTop > tmpY ? 170 : e.scrollTop;
		this.headerOpacity = e.scrollTop * (1 / tmpY);
	},
	methods: {
		async loadData(data) {
			await uni.request({
				url: '/wanlshop/find/user/userInfo',
				method: 'POST',
				data: data,
				success: res => {
					if (res.data.user_id === this.$store.state.user.id) {
						this.isMyfind = true;
					}
					// this.navList[0].type_text = `作品(${res.data.works})`;
					// this.navList[1].type_text = `喜欢(${res.data.likes})`;
					this.userData = res.data;
					this.loadFindData();
				}
			});
		},
		loadFindData(source) {
			//这里是将订单挂载到tab列表下
			let navItem = this.navList[this.currentId];
			//判断是否最后一页
			if (navItem.loadingType == 'noMore') {
				return;
			}
			//tab切换只有第一次需要加载数据
			if (source === 'tabChange' && navItem.loaded === true) {
				return;
			}
			//防止重复加载
			if (navItem.loadingType === 'loading') {
				return;
			}
			navItem.loadingType = 'loading';
			let type =
				navItem.type === 'works' ? (this.isMyfind ? 'myfind' : navItem.type) : navItem.type;
			// 获取列表
			uni.request({
				url: '/wanlshop/find/find/getList',
				data: {
					type: type,
					user_no: this.userData.user_no,
					page: navItem.current_page
				},
				success: res => {
					navItem.current_page = res.data.current_page; //当前页码
					if (res.data.last_page === res.data.current_page) {
						navItem.loadingType = 'noMore';
					} else {
						navItem.loadingType = 'more';
						navItem.current_page++;
					}
					res.data.data.forEach(item => {
						navItem.dataList.push(item);
					});
					this.$set(navItem, 'loaded', true);
				}
			});
		},
		async handleFollow(shop) {
			if (this.$store.state.user.isLogin) {
				this.loadingFollow = true;
				await uni.request({
					url: '/wanlshop/find/user/setFindUser',
					method: 'POST',
					data: {
						id: this.userData.user_no,
						type: 'follow'
					},
					success: res => {
						if (shop) {
							let concern = this.$store.state.statistics.dynamic.concern;
							if (res.data.data === 0) {
								concern -= 1;
							} else {
								concern += 1;
							}
							this.$store.commit('statistics/dynamic', {
								concern: concern
							});
						}
						if (res.data.data === 1) {
							this.userData.fans += 1;
						} else if (res.data.data === 0) {
							this.userData.fans -= 1;
						}
						this.userData.isFollow = res.data.data;
						this.loadingFollow = false;
					}
				});
			} else {
				this.$wanlshop.to('/pages/user/auth/auth');
			}
		},
		async handleLike(index) {
			if (this.$store.state.user.isLogin) {
				let data = this.navList[this.currentId].dataList[index];
				await uni.request({
					url: '/wanlshop/find/user/setFindUser',
					method: 'POST',
					data: {
						id: data.id,
						type: 'likes'
					},
					success: res => {
						if (res.data.data === 0) {
							data.likes -= 1;
						} else {
							data.likes += 1;
						}
						data.isLike = res.data.data;
					}
				});
			} else {
				this.$wanlshop.to('/pages/user/auth/auth');
			}
		},
		async handleDel(index) {
			if (this.$store.state.user.isLogin) {
				uni.showModal({
					content: '确定要删除此作品？',
					success: res => {
						if (res.confirm) {
							let data = this.navList[this.currentId].dataList;
							uni.request({
								url: '/wanlshop/find/find/delData',
								method: 'POST',
								data: {
									id: data[index].id
								},
								success: del => {
									data.splice(index, 1);
								}
							});
						}
					}
				});
			} else {
				this.$wanlshop.to('/pages/user/auth/auth');
			}
		},
		async handleTheme() {
			if (this.isMyfind) {
				uni.showActionSheet({
					itemList: ['从主题库选择背景', '从相册上传图片'],
					success: action => {
						if (action.tapIndex === 0) {
							this.$wanlshop.to('/pages/user/theme');
						} else if (action.tapIndex === 1) {
							uni.chooseImage({
								success: res => {
									uni.request({
										url: '/wanlshop/common/uploadData',
										success: updata => {
											uni.uploadFile({
												url: updata.data.uploadurl,
												filePath: res.tempFilePaths[0],
												name: 'file',
												formData:updata.data.storage == 'local'? null: updata.data.multipart,
												success: data => {
													this.editTheme({
														url: JSON.parse(data.data).data.url,
														type: 'upload'
													});
												},
												fail: error => {
													uni.showToast({title: JSON.parse(error.data).msg, icon: 'error', position: true});
												}
											});
										}
									});
								}
							});
						}
					}
				});
			}
		},
		async editTheme(data) {
			await uni.request({
				url: '/wanlshop/find/user/editTheme',
				method: 'POST',
				data: data,
				success: res => {
					this.userData.image = res.data.image;
					this.userData.color = res.data.color;
				}
			});
		},
		handlePublish() {
			let itemList = [], url = [];
			if(this.userData.shop){
				if(this.userData.isVideo){
					if(this.userData.isLive){
						itemList = ['发布种草', '发布短视频', '商家直播'];
						url = ['/pages/apps/find/user/add?type=want', '/pages/apps/find/user/add?type=video', '/pages/shop/live/live'];
					}else{
						itemList = ['发布种草', '发布短视频'];
						url = ['/pages/apps/find/user/add?type=want', '/pages/apps/find/user/add?type=video'];
					}
				}else{
					if(this.userData.isLive){
						itemList = ['发布种草', '商家直播'];
						url = ['/pages/apps/find/user/add?type=want', '/pages/apps/find/user/add?type=video'];
					}else{
						itemList = ['发布种草'];
						url = ['/pages/apps/find/user/add?type=want'];
					}
				}
			}else{
				if(this.userData.isVideo){
					itemList = ['发布种草', '发布短视频'];
					url = ['/pages/apps/find/user/add?type=want', '/pages/apps/find/user/add?type=video'];
				}else{
					itemList = ['发布种草'];
					url = ['/pages/apps/find/user/add?type=want'];
				}
			}
			uni.showActionSheet({
				itemList: itemList,
				success: res => {
					if (res.tapIndex === 2) {
						// #ifdef APP-PLUS || MP-WEIXIN
						this.$wanlshop.to(url[res.tapIndex]);
						// #endif
						// #ifndef APP-PLUS || MP-WEIXIN
						this.$wanlshop.msg('目前只开放App和微信小程序直播');
						// #endif
					}else{
						this.$wanlshop.to(url[res.tapIndex]);
					}
				}
			});
		},
		// 选择Tag
		handleSelect(index) {
			this.currentId = index;
			this.loadFindData('tabChange');
		},
		handleBack() {
			this.$wanlshop.back(1);
		},
		handleUserEdit() {
			this.$wanlshop.auth('/pages/user/setting/user');
		},
		// 格式化html
		formatHtml(content) {
			return content.replace(/<\/?.+?>/g, '').replace(/ /g, '');
		},
		// 弹出层
		showModal(name) {
			// 滚动下分享
			if (name == 'share' && this.modalName != 'share') {
				setTimeout(() => {
					this.scrollAnimation = 300;
				}, 300);
			}
			this.modalName = name;
		},
		hideModal(name) {
			if (name) {
				this.showModal(name);
			} else {
				this.modalName = null;
			}
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #ffffff;
}
.wanlgroups-user-container {
	&__head {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9;

		.background {
			position: absolute;
			left: 0;
			right: 0;
			z-index: 1;

			.bgcolor {
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.4);
			}
		}

		.navigater {
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: absolute;
			left: 0;
			right: 0;
			z-index: 9;
			padding-left: 25rpx;
			padding-right: 25rpx;
			/* #ifdef MP */
			padding-right: 220rpx;
			/* #endif */
			& > view {
				display: flex;
				align-items: center;
			}
		}
	}

	&__main {
		background-size: 100% auto;
		background-repeat: no-repeat;
		background-position-y: center;
		.text-white-agba {
			color: rgba(255, 255, 255, 0.9);
		}
		.head {
			padding: 0 30rpx;
			padding-bottom: 50rpx;
			background-color: rgba(0, 0, 0, 0.4);

			.userinfo {
				display: flex;
				align-items: center;
				.cu-avatar {
					width: 130rpx;
					height: 130rpx;
				}
			}

			.findinfo {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.quantity {
					display: flex;
					.project {
						width: 100rpx;
						margin-right: 10rpx;
						overflow: hidden;
					}
				}
			}

			.shopinfo {
				display: flex;
				align-items: center;
				justify-content: space-between;
				&.solid-top {
					&::after {
						border-top: 1rpx solid rgba(255, 255, 255, 0.92);
					}
				}
				.cu-avatar {
					background-color: rgba(0, 0, 0, 0.1);
					width: 65rpx;
					height: 65rpx;
				}
				.subject {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.info {
						& > view {
							display: flex;
							align-items: center;
						}
					}
				}
			}
		}
	}

	&__list {
		margin-top: -30rpx;
		border-radius: 24rpx 24rpx 0 0;
		padding-top: 2rpx;
		.questionbag {
			position: -webkit-sticky;
			position: sticky;
			z-index: 99;
			margin: 0 16rpx;
		}
		.main {
			.empty {
				padding-top: 100rpx;
				display: flex;
				justify-content: center;
				image {
					width: 320rpx;
					height: 320rpx;
				}
			}
			.list {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				padding: 0 16rpx;
				justify-content: space-between;
				.item {
					margin-bottom: 40rpx;
					flex: 0 0 calc((100% - 16rpx) / 2);
					overflow: hidden;
					.examine {
						height: 460rpx;
						position: relative;
						.cover {
							height: 460rpx;
							background-size: cover;
							background-position: center;
							background-repeat: no-repeat;
						}
						.state {
							position: absolute;
							top: 0;
							right: 0;
							left: 0;
							bottom: 0;
							background-color: rgba(0, 0, 0, 0.2);
						}
					}
				}
			}
		}
	}

	&__modal {
		.praised {
			.cu-dialog {
				width: 70%;
				overflow: hidden;
				image {
					height: 100%;
				}
			}
		}
	}
}
</style>
